<template>
  <section>
    <div
      class="container h-screen mx-auto flex flex-col md:flex-row items-center"
    >
      <div class="cube-wrap w-full h-1/2 md:w-1/2">
        <div class="out-cube" :class="[open ? 'open' : '']" @click="onClick">
          <div class="out-face front">Vue</div>
          <div class="out-face back">Uniapp</div>
          <div class="out-face left">Html</div>
          <div class="out-face right">JS</div>
          <div class="out-face top">CSS</div>
          <div class="out-face bottom">Build</div>
        </div>

        <div class="in-cube">
          <div class="in-face front">
            <img src="../assets/imgs/vue.png" alt />
          </div>
          <div class="in-face back">
            <img src="../assets/imgs/mp.png" alt />
          </div>
          <div class="in-face left">
            <img src="../assets/imgs/html.png" alt />
          </div>
          <div class="in-face right">
            <img src="../assets/imgs/js.png" alt />
          </div>
          <div class="in-face top">
            <img src="../assets/imgs/css.png" alt />
          </div>
          <div class="in-face bottom">
            <img src="../assets/imgs/build.png" alt />
          </div>
        </div>
      </div>

      <div class="w-full md:w-1/2 p-8 text-white">
        <h3 class="title mb-8">技能清单</h3>

        <div class="describe text-sm">
          <p class="dot">
            Vue：2 年+使用经验，熟练掌握 Vue2 及全家桶应用
            Router、Vuex。掌握组件化开发，能够进行组件编写及封装。对 Vue3、Pinia
            有一定的了解，可以直接上手使用。
          </p>
          <p class="dot">
            Uniapp：熟练掌握 uniapp
            进行混合开发，熟悉小程序开发，授权登录、移动支付等常用功能接入。
          </p>
          <p class="dot">JS：掌握ES6基本语法，熟悉各种常用插件的使用。</p>
          <p class="dot">
            CSS：熟练掌握 CSS 书写各种样式，掌握
            flex、栅格、rem、百分比进行页面布局，掌握 postcss 以及 scss/less
            预处理工具，最喜欢的工具是 Tailwind.css。
          </p>
          <p class="dot">
            构建工具：常用的构建工具有 Vuecli 和 Vite，对 Gulp
            有一定的了解和使用。
          </p>
          <p class="dot">Git：熟练掌握 git 进行版本控制。</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      open: false
    }
  },
  methods: {
    onClick() {
      this.open = true
      setTimeout(() => {
        this.open = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotate(0deg);
  }

  100% {
    transform: rotateX(2turn) rotateY(1turn) rotate(1turn);
  }
}

section {
  min-height: 100vh;
  position: relative;
  z-index: 10;
  background: linear-gradient(135deg, #1f1c2c, #928dab);
}

.cube-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.out-cube {
  --size: min(140px, 40vw, 40vh);
  --offset: calc(var(--size) / 2);
  --open: 0px;
  width: var(--size);
  height: var(--size);
  color: #fff;
  position: absolute;
  transform-style: preserve-3d;
  animation: rotate 14s linear infinite;
  z-index: 9;

  &.open {
    --open: 24px;
  }
}

.out-face {
  width: var(--size);
  height: var(--size);
  background: rgba(141, 214, 249, 0.1);
  border: 3px solid rgba(228, 197, 204, 0.3);
  box-sizing: border-box;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  transition: all 0.4s;
  cursor: pointer;

  img {
    width: 64%;
    height: auto;
    object-fit: cover;
  }

  &.front {
    transform: translateZ(calc(var(--offset) + var(--open)));
  }

  &.back {
    transform: rotateY(180deg) translateZ(calc(var(--offset) + var(--open)));
  }

  &.left {
    transform: rotateY(-90deg) translateZ(calc(var(--offset) + var(--open)));
  }

  &.right {
    transform: rotateY(90deg) translateZ(calc(var(--offset) + var(--open)));
  }

  &.top {
    transform: rotateX(-90deg) translateZ(calc(var(--offset) + var(--open)));
  }

  &.bottom {
    transform: rotateX(90deg) translateZ(calc(var(--offset) + var(--open)));
  }
}

.in-cube {
  --size: 60px;
  --offset: calc(var(--size) / 2);
  width: var(--size);
  height: var(--size);
  position: absolute;
  transform-style: preserve-3d;
  animation: rotate 14s linear infinite;
  z-index: 8;
}

.in-face {
  width: var(--size);
  height: var(--size);
  background: rgb(0, 10, 65);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 64%;
    height: auto;
    object-fit: cover;
  }

  &.front {
    transform: translateZ(var(--offset));
  }

  &.back {
    transform: rotateY(180deg) translateZ(var(--offset));
  }

  &.left {
    transform: rotateY(-90deg) translateZ(var(--offset));
  }

  &.right {
    transform: rotateY(90deg) translateZ(var(--offset));
  }

  &.top {
    transform: rotateX(-90deg) translateZ(var(--offset));
  }

  &.bottom {
    transform: rotateX(90deg) translateZ(var(--offset));
  }
}
</style>
